<template>
  <div class="ro-container">
    <!-- 具体的一个评分 -->
    <el-card>
      <!-- 上面的部分 -->
      <el-row>
        <el-col :span="8"
          >第{{ currentTopicIndex + 1 }}题 (已阅{{ currentStuIndex }}份 / 全部{{
            totalPaperNum
          }}份)
        </el-col>
        <el-col style="text-align: right" :span="4" :offset="12">
          报告问题
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 实际考试的部分 -->
      <div v-if="currentTopic" class="question-box">
        <div class="question">
          问题：<span>{{ currentTopic.title }} </span>（满分:
          {{ currentTopic.totalScore }}分）
        </div>
        <div class="reference">
          参考答案：<span style="font-weight: 600">{{
            currentTopic.reference
          }}</span>
        </div>
        <div class="answer">
          学生答案：<span class="stu-ans">{{ currentAnswer }}</span
          >(目前得分:{{ currentScore || 0 }} 分)
        </div>
        <div class="controls">
          <!-- 上一张 -->
          <el-button icon="el-icon-arrow-left" circle @click="prev"></el-button>
          <!-- 打分 -->
          <el-input-number
            v-model="currentScore"
            :step="0.5"
            :min="0"
            :max="currentTopic.totalScore"
            :precision="1"
          ></el-input-number>
          <!-- 下一张 -->
          <el-button icon="el-icon-arrow-right" circle @click="next">
          </el-button>
        </div>
      </div>
    </el-card>
    <div class="score">
      <!-- 这边放那些小方块 -->
      <!-- 但是可以不用topicSheet因为那个太复杂了 -->
      <topic-square
        v-for="(item, index) in studentAnswers"
        :key="index"
        :order="index + 1"
        :isWatching="currentTopicIndex === index"
        :scrollByIndex="scrollByIndex"
        :changeWatchingIndex="() => {}"
        :choice="item.score"
        style="margin-right: 10px"
      ></topic-square>
    </div>
  </div>
</template>

<script>
//引入提示
import { Message, Notification } from "element-ui";
/*
 * 每个数组中的数组表示那个人的那一张试卷的所有主观题内容：[
 *  [‘xxxx’,'xxxx],
 *  [‘xxxx’,'xxxx],
 * ]
 * 映射序列：[25,28]
 * subjectTopics:[
 * {
 *    timi:'xxx',
 *    totalScore:10,
 *    reference:'xxxxxxx'
 * },
 *
 * ]
 */

import TopicSquare from "@/components/TopicSquare.vue";

export default {
  name: "ReadOver",
  components: {
    TopicSquare,
  },
  data() {
    return {
      subjectTopics: [], //主观题的题目，满分和参考答案
      studentAnswers: [], //学生的答案
      currentStuIndex: 0, //当前学生索引
      currentTopicIndex: 0, //当前题目索引
      totalPaperNum: 0,
      currentStudentID: "",
      reviewResult: [],
      exam_id: "",
    };
  },
  methods: {
    getStudentAnswer() {
      this.$http
        .get(`${this.$reqPrefix}/getStudentTopicAnswer?exam_id=${this.exam_id}`)
        .then((res) => {
          if (res.data.code == 200) {
            this.currentStudentID = res.data.data.student_id;
            this.studentAnswers = res.data.data.answer;
          }
        })
        .catch((err) => {
          alert("已经批阅完全部试卷，即将返回");
          this.$router.replace("/my/inspection");
        });
    },
    // 下一题的回调
    next() {
      // 有可能是下一题，也有可能是下一张试卷
      // 所以就需要识别
      // 判断一下有没有越界吧
      if (
        this.currentTopicIndex >= 0 &&
        this.currentTopicIndex < this.subjectTopics.length - 1
      ) {
        //当前题目索引在0到
        this.currentTopicIndex++;
      } else if (this.currentTopicIndex === this.subjectTopics.length - 1) {
        //提示一下
        //  提交当前的学生作答
        Notification({
          title: "提示",
          message: "当前卷子已经评阅完毕，正在上传...",
          duration: 2000,
        });
        const { exam_id } = this;
        const { teacher_id } = JSON.parse(localStorage.getItem("userInfo"));
        this.$http
          .post(`${this.$reqPrefix}/uploadEvaluateResult`, {
            teacher_id,
            exam_id,
            student_id: this.currentStudentID,
            evaluateResult: this.reviewResult,
          })
          .then((res) => {
            if (res.data.code == 200) {
              // Notification.
              Notification({
                title: "提示",
                message: "上传完成",
                duration: 2000,
              });
              this.currentStuIndex++;
              this.currentTopicIndex = 0;
              //  重新获取一份那个学生作答，并且将reviewResult重置
              this.reviewResult = [];
              this.getStudentAnswer();
            }
          });
      } else {
        return;
      }

      // 这里面写上传批阅结果的逻辑，建议是阅完一个人的就本地存储一下，然后最后整体上传
      // this.axios.get(`${this.$reqPrefix}/uploadEvaluateResult`).then((res) => {
      //   // this.xxx = res.data.data;
      // });
    },
    // 上一题的回调
    prev() {
      // 判断如果到了第一道题，就不允许--了
      if (this.currentTopicIndex == 0) {
        // console.log("到顶了！达咩哟");
        return;
      }
      this.currentTopicIndex--;
    },
    // 点击后改变index的回调
    scrollByIndex(index) {
      this.currentTopicIndex = index;
    },
    // 点击后改变watchIndex的回调
    changeWatchingIndex() {},
  },
  computed: {
    currentScore: {
      get() {
        return this.reviewResult[this.currentTopicIndex];
      },
      set(newVal) {
        this.$set(this.reviewResult, this.currentTopicIndex, newVal);
      },
    },
    currentTopic() {
      return this.subjectTopics[this.currentTopicIndex];
    },
    currentAnswer() {
      return this.studentAnswers[this.currentTopicIndex];
    },
    nextTopicIsDisabled() {
      return this.currentTopicIndex === this.subjectTopics.length - 1;
    },
    isEnd() {
      return (
        this.currentTopicIndex === this.subjectTopics.length - 1 &&
        this.currentStuIndex === this.studentAnswers.length - 1
      );
    },
  },
  mounted() {
    // const exam_id = '001'
    this.exam_id = this.$route.query.exam_id;
    //获取试题及答案
    this.$http
      .get(
        `${this.$reqPrefix}/getSubjectTopicAndAnswer?exam_id=${this.exam_id}`
      )
      .then((res) => {
        if (res.data.code == 200) {
          this.subjectTopics = res.data.data.subjectTopics;
          this.totalPaperNum = res.data.data.totalPaperNum;
          this.currentStuIndex = res.data.data.currentStuIndex;
          //  获取一份学生试卷
          this.getStudentAnswer();
        }
      });
  },
};
</script>

<style lang='less' scoped>
.ro-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .el-card {
    width: 60%;
    min-height: 500px;
    position: relative;

    .el-row {
      margin-bottom: 20px;
    }

    .question-box {
      // background-color: yellow;
      // 不要这样苛责自己
      .question {
        span {
          border-bottom: 2px solid #000;
        }
      }

      .reference {
        background-color: #ddd;
        font-size: 12px;
        color: #9d9d9d;
        min-height: 100px;
        border-radius: 10px;
        padding: 10px;
        margin: 10px 0;
      }

      .answer {
        .stu-ans {
          border-bottom: 2px solid #000;
        }
      }
    }

    .controls {
      display: flex;
      justify-content: center;
      position: absolute;
      bottom: 20px;
      left: calc(50% - 170px); //1017-319
      * {
        margin-left: 20px;
      }
    }
  }

  .score {
    width: 20%;
    height: 500px;
    // border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1)
    // .topic-square{
    //   margin-right: 10px;
    // }
  }
}
</style>